<template>
  <div :class="switchValue == '' ? 'home_dark' : 'home_' + switchValue">
    <div class="second-page">
      <div class="wrap">
        <div class="header">
          <div class="title">成都市规划和国土资源办公门户-服务大厅</div>
          <div class="header-right-box">
            <div class="header-menu-box">
              <p
                @click="$router.push('/home')"
                style="
                  cursor: pointer;
                  color: rgba(0, 118, 255, 1);
                  font-weight: bold;
                "
              >
                主页
              </p>
              <div class="theme">
                <span>您好，{{ userInfo.userName }}</span>
                <span @click="logout">
                  <i class="el-icon-switch-button"></i>退出
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="banner">
        <div class="wrap">
          <div class="header-search-box">
            <el-input></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="wrap">
          <!-- 系统导航 -->
          <div class="system-navigation module-box">
            <div class="module-title">
              <p>系统导航</p>
            </div>
            <div class="system-navigation-box">
              <div
                class="left-pagination-btn"
                @click="systemNavigationPrev"
                v-if="xtdhData.curPage != 1"
              >
                <span class="el-icon-arrow-left"></span>
              </div>
              <div
                class="system-navigation-item"
                v-for="(item, index) in xtdhData.currentPageData"
                :key="index"
                @click="czscDetail('cjwt', item.sysId)"
              >
                <div :class="['system-item-icon', item.bgColor]">
                  <img
                    :src="switchValue == 'light' ? item.lightImg : item.darkImg"
                    alt
                  />
                </div>
                <p>{{ item.name }}</p>
              </div>
              <div
                class="right-pagination-btn"
                @click="systemNavigationNext"
                v-if="xtdhData.curPage < xtdhData.totalPage"
              >
                <span class="el-icon-arrow-right"></span>
              </div>
            </div>
          </div>
          <el-row>
            <el-col :span="16">
              <!-- 常用知识库 -->
              <div class="module-box knowledge-base">
                <div class="module-title">
                  <p>常用知识库</p>
                </div>
                <div class="knowledge-list">
                  <div class="knowledge-list-item">
                    <div class="knowledge-list-img">
                      <img
                        src="@/assets/image/servePage/icon-db-img.png"
                        alt=""
                      />
                    </div>
                    <p>公文拟稿规范</p>
                    <p>发布者：信息中心</p>
                  </div>
                  <div class="knowledge-list-item">
                    <div class="knowledge-list-img">
                      <img
                        src="@/assets/image/servePage/icon-fw-img.png"
                        alt=""
                      />
                    </div>
                    <p>发文操作流程</p>
                    <p>发布者：信息中心</p>
                  </div>
                  <div class="knowledge-list-item">
                    <div class="knowledge-list-img">
                      <img
                        src="@/assets/image/servePage/icon-gw-img.png"
                        alt=""
                      />
                    </div>
                    <p>督办操作流程</p>
                    <p>发布者：信息中心</p>
                  </div>
                </div>
                <div class="knowledge-question-box">
                  <div class="knowledge-question-item">
                    <p class="title-txt err-txt">常见问题</p>
                    <p>区县、事业单位收文人员如何将市局...</p>
                  </div>
                  <div class="knowledge-question-item">
                    <p class="title-txt err-txt">常见问题</p>
                    <p>区县、事业单位收文人员如何将市局...</p>
                  </div>
                  <div class="knowledge-question-item">
                    <p class="title-txt war-txt">最新功能</p>
                    <p>区县、事业单位收文人员如何将市局...</p>
                  </div>
                  <div class="knowledge-question-item">
                    <p class="title-txt war-txt">最新功能</p>
                    <p>区县、事业单位收文人员如何将市局...</p>
                  </div>
                  <div class="knowledge-question-item">
                    <p class="title-txt prim-txt">最新手册</p>
                    <p>区县、事业单位收文人员如何将市局...</p>
                  </div>
                  <div class="knowledge-question-item">
                    <p class="title-txt prim-txt">最新手册</p>
                    <p>区县、事业单位收文人员如何将市局...</p>
                  </div>
                </div>
              </div>
              <!-- 操作手册 -->
              <div class="module-box">
                <div class="module-title">
                  <p>操作手册</p>
                </div>
                <div class="handle-manual">
                  <div class="handle-manual-box">
                    <div
                      class="handle-manual-item"
                      v-for="item in czscList"
                      :key="item.ID"
                      @click="czscDetail('czsc', item.ID)"
                    >
                      <p>{{ item.NAME }}操作手册</p>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <!-- 服务热线 -->
              <div class="module-box serve-hotline-box">
                <div class="module-title">
                  <p>服务热线</p>
                </div>
                <div class="serve-line">
                  <div class="serve-line-box">
                    <div
                      class="serve-line-item"
                      v-for="(item, index) in serveLineLise"
                      :key="index"
                    >
                      <div class="serve-line-number">
                        <p>{{ index }}</p>
                      </div>
                      <div class="serve-line-val">
                        <div class="serve-line-val-item">
                          <p style="margin-right: 20px; min-width: 100px">
                            信息中心
                          </p>
                          <p>
                            联系电话：<span class="serve-line-phone">{{
                              item.LXDH
                            }}</span>
                          </p>
                        </div>
                        <div class="serve-line-val-item">
                          <p style="margin-right: 10px">技术支持部门：</p>
                          <p>
                            {{ item.ZCBM }}
                          </p>
                        </div>
                        <div class="serve-line-val-item">
                          <p style="margin-right: 10px; min-width: 100px">
                            技术支持人员：
                          </p>
                          <p>{{ item.ZCRY }}</p>
                        </div>
                        <div class="serve-line-val-item serve-line-xtmc">
                          <p style="width: 100px">系统名称：</p>
                          <p>
                            {{ item.NAME }}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <footerCom></footerCom>
    </div>
  </div>
</template>
<script>
import $ from "jquery"; //引入jquery，否则document.getElementById为null
import footerCom from "./footerCom.vue"
export default {
  components: {footerCom},
  data() {
    return {
      switchValue: "dark",
      userId: localStorage.getItem("USER_ID"),
      interfaceName: "antu.newportal-zjx.provider.portal.PortalProvider",
      userInfo: "",
      xtdhData: {
        currentPageData: [], //当前页显示内容
        pageSize: 20,
        curPage: 1,
        totalPage: 1,
      },
      navigatorLink: [],
      serveLineLise: [],
      czscList: [],
    };
  },
  methods: {
    logout() {
      localStorage.removeItem("USER_ID");
      localStorage.removeItem("TOKEN");
      this.$router.push("/");
    },
    getUserInfo() {
      var that = this;
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserInfo",
          args: [localStorage.getItem("USER_ID")],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);
            that.userInfo = response.result;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    // 获取用户有权限的系统
    getUserLinkPower() {
      let that = this;
      this.$.ajax({
        url: that.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: that.interfaceName,
          methodName: "getUserLinkPower",
          args: [that.userId, 1, 200],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);
            console.log(response.result);

            let tmpResData = [];

            let resData = [];

            let bgColor = {
              事业管理: "sygl-grid",
              行政管理: "xzgl-grid",
              综合事务: "zhsw-grid",
            };

            resData = response.result.items;

            resData.map((item) => {
              let tmpObj = item;

              tmpObj["lightImg"] = that.$API.iconUrl + item["lightIcon"];

              tmpObj["darkImg"] = that.$API.iconUrl + item["darkIcon"];

              tmpObj["bgColor"] = bgColor[item.type];

              tmpResData.push(tmpObj);
            });

            tmpResData.sort(function (a, b) {
              return b.clickCount - a.clickCount;
            });

            that.navigatorLink = tmpResData;

            that.fenye();
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    //分页
    fenye: function () {
      // 计算一共有几页
      this.xtdhData.totalPage = Math.ceil(
        this.navigatorLink.length / this.xtdhData.pageSize
      );
      // 计算得0时设置为1
      this.xtdhData.totalPage =
        this.xtdhData.totalPage == 0 ? 1 : this.xtdhData.totalPage;
      this.setCurrentPageData();
    },
    // 设置当前页面数据，对数组操作的截取规则为[0~10],[10~20]...,
    setCurrentPageData: function () {
      let begin = (this.xtdhData.curPage - 1) * this.xtdhData.pageSize;
      let end = this.xtdhData.curPage * this.xtdhData.pageSize;
      this.xtdhData.currentPageData = this.navigatorLink.slice(begin, end);

      console.log(this.xtdhData);
    },
    // 上一页
    systemNavigationPrev() {
      if (this.xtdhData.curPage == 1) return;
      this.xtdhData.curPage--;
      this.setCurrentPageData();
    },
    // 下一页
    systemNavigationNext() {
      if (this.xtdhData.curPage == this.xtdhData.totalPage) return;
      this.xtdhData.curPage++;
      this.setCurrentPageData();
    },
    // 获取用户主题
    getUserStyle() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName: "antu.newportal-zjx.provider.user.UserProvider",
          methodName: "getUserStyle",
          args: [this.userId],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            if (response.result == "1") {
              this.switchValue = "light";
            } else {
              this.switchValue = "dark";
            }
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getSeverList() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName:
            "antu.newportal-zjx.provider.helpcenter.HelpCenterProvider",
          methodName: "getJSZCList",
          args: [""],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);

            console.log(response.result);

            this.serveLineLise = response.result;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    getCZSCList() {
      this.$.ajax({
        url: this.$API.ajaxPath,
        type: "post",
        data: {
          interfaceName:
            "antu.newportal-zjx.provider.helpcenter.HelpCenterProvider",
          methodName: "getSystems",
          args: [""],
        },
        dataType: "json",
        success: (response) => {
          if (response.status == "0") {
            response.result = JSON.parse(response.result);

            console.log(response.result);

            this.czscList = response.result;
          }
        },
        error: (xhr) => {
          console.log(xhr);
        },
      });
    },
    czscDetail(type, id) {
      this.$router.push({
        name: "serviceList",
        query: { type: type, systemId: id },
      });
    },
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {
    // 获取用户信息
    this.getUserInfo();
    // 获取用户所选主题
    this.getUserStyle();
    // 获取用户有权限的菜单
    this.getUserLinkPower();

    this.getSeverList();

    this.getCZSCList();
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="less" scoped>
@import "./css/light.less";
@import "./css/dark.less";

p {
  margin: 0;
  padding: 0;
}

.second-page {
  .wrap {
    width: 85%;
    margin: 0 auto;
  }

  .content {
    background: none;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 35px;
    padding: 0 !important;
    box-shadow: none;
    margin-left: 0;
  }

  .header-right-box {
    display: flex;
    align-items: center;
  }

  .header-menu-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    padding-right: 40px;

    p {
      color: rgba(67, 67, 67, 1);
      font-size: 14px;
    }
  }

  .header-search-box {
    width: 70%;
    max-width: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;

    & /deep/ .el-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .banner {
    width: 100%;
    height: 161px;
    background-image: url("../assets/image/banner-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .banner .wrap {
    padding: 0 120px 0 145px;
    position: absolute;
    display: flex;
    height: 161px;
    // align-items: flex-end;
  }

  .banner-left-title {
    margin-left: 152px;
    width: 300px;
    height: 70px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    background-color: rgba(54, 112, 255, 1);
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;

    p {
      font-size: 28px;
      color: #ffffff;
      font-weight: bolder;
    }
  }

  .banner-right-crumbs {
    position: absolute;
    bottom: 0;
    left: 500px;
    color: #ffffff;
    z-index: 2;
  }

  .main .wrap {
    box-sizing: border-box;
    padding: 24px;
  }

  .module-box {
    background-color: #ffffff;
    padding: 20px 10px;
    margin-bottom: 24px;
    .module-title {
      font-size: 16px;
      color: #333333;
      border-bottom: 1px rgba(204, 204, 204, 0.4) solid;
      padding-left: 10px;

      p {
        display: inline-block;
        border-bottom: 2px rgba(170, 205, 244, 1) solid;
        padding: 5px 0;
        padding-bottom: 10px;
        font-weight: bold;
      }
    }

    .system-navigation-box {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      padding: 20px 30px 0;
      min-height: 300px;

      .left-pagination-btn,
      .right-pagination-btn {
        width: 26px;
        height: 300px;
        background-color: rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transition: all 0.3s;
        position: absolute;
        top: 50%;
        margin-top: -150px;
      }

      .left-pagination-btn {
        left: 0;
      }

      .right-pagination-btn {
        right: 0;
      }

      &:hover .left-pagination-btn {
        opacity: 1;
      }

      &:hover .right-pagination-btn {
        opacity: 1;
      }
    }

    .system-navigation-item {
      width: 10%;
      box-sizing: border-box;
      padding: 10px 0;
      text-align: center;
      cursor: pointer;
      border-radius: 5px;

      p {
        font-size: 14px;
        font-weight: bold;
        padding: 10px 0 0;
      }
    }

    .system-item-icon {
      width: 50%;
      min-height: 75px;
      background-color: rgba(238, 243, 255, 1);
      margin: 0 auto;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
      }
    }
  }

  .serve-hotline-box {
    margin-left: 24px;
  }

  .knowledge-base {
    .knowledge-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .knowledge-list-item {
      width: 32%;
      padding: 10px 0;

      p:first-of-type {
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        padding: 10px 0;
      }

      p:last-of-type {
        font-size: 16px;
        font-weight: 500;
        color: #828282;
      }
    }

    .knowledge-list-img {
      width: 100%;

      img {
        width: 100%;
      }
    }

    .knowledge-question-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .knowledge-question-item {
      width: 50%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 10px 10px 10px 0;

      p:last-of-type {
        font-size: 16px;
        font-weight: 500;
        color: #4e4848;
        margin-left: 10px;
      }
    }

    .title-txt {
      font-size: 12px;
      font-weight: 700;
      color: rgba(68, 145, 232, 1);
      background-color: rgba(240, 247, 255, 1);
      padding: 5px;
      border-radius: 3px;
    }

    .err-txt {
      background-color: rgba(255, 232, 232, 1);
      color: rgba(240, 58, 58, 1);
    }

    .war-txt {
      background-color: rgba(255, 239, 221, 1);
      color: rgba(255, 149, 43, 1);
    }

    .prim-txt {
      background-color: rgba(240, 247, 255, 1);
      color: rgba(68, 145, 232, 1);
    }
  }
  .handle-manual {
    padding: 20px 0 0;

    .handle-manual-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .handle-manual-item {
      width: 30%;
      box-sizing: border-box;
      padding: 10px;
      background-color: rgba(240, 247, 255, 1);
      transition: all 0.4s;
      margin-bottom: 20px;
      text-align: center;
      cursor: pointer;
      border-radius: 5px;

      p {
        font-size: 15px;
        color: #4f4f4f;
      }

      &:hover {
        background-color: rgba(64, 158, 255, 1);

        p {
          color: #ffffff;
        }
      }
    }
  }

  .serve-line {
    .serve-line-box {
      height: 1000px;
      overflow-y: auto;
    }

    .serve-line-item {
      display: flex;
      margin-bottom: 24px;
    }

    .serve-line-number {
      width: 50px;
      height: 50px;
      box-sizing: border-box;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url("../assets/image/servePage/serve-number-bgicon.png")
        no-repeat;
      background-size: 30px 30px;
      background-position: center;
      margin-right: 10px;

      p {
        font-size: 16px;
        font-weight: bold;
        color: rgba(242, 176, 21, 1);
      }
    }

    .serve-line-val {
      padding-bottom: 15px;
      border-bottom: 1px #ccc dashed;
    }

    .serve-line-val-item {
      display: flex;
      font-size: 14px;
      font-weight: 500;
      padding: 5px 0;
    }

    .serve-line-xtmc {
      color: rgba(5, 26, 78, 0.45);
    }

    .serve-line-phone {
      color: rgba(54, 112, 255, 1);
    }
  }

  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 7px;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.4);
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.6);
  }
}
</style>